<!-- Search -->
<template>
  <div class="page">
    <div class="loop">
      <img v-for="(item,index) in list" :key="index" :src="item.url" class="img" alt="" :style="`left: ${item.x}px; top: ${item.y}px;`" />
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, computed,type WritableComputedRef } from "vue";
import img from "./1678328500134.jpg"
let data = reactive(
  {
    pagename: 'Search'
  }
);
let list = reactive([
  {url:img, deg: -45, x:0,y:0},
  {url:img, deg: 0, x:0,y:0},
  {url:img, deg: 45, x:0,y:0},
  {url:img, deg: 90, x:0,y:0},
  {url:img, deg: 135, x:0,y:0},
  {url:img, deg: 180, x:0,y:0},
  {url:img, deg: 225, x:0,y:0},
  {url:img, deg: 270, x:0,y:0},
]);


function getEllipsePoint(angle) {
  var radian = angle * (Math.PI / 180);
  var x = 175 + 150 * Math.cos(radian);
  var y = 30 + 50 * Math.sin(radian);
  return { x: x, y: y };
}

const updateAnimation = ()=>{
    list.forEach(item=>{
    item.deg = item.deg - 1
    let opstion = getEllipsePoint(item.deg)
    item.x = opstion.x;
    item.y = opstion.y;
  })
  requestAnimationFrame(updateAnimation);
}
updateAnimation()
// cancelAnimationFrame
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.page{
  display: flex;
  justify-content: center;
  align-items: center;
}
.loop {
  margin-top: 100px;
  width: 300px;
  height: 150px;
  border-radius: 50%;
  background-color: #eee;
  position: relative;
}
.img{
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>